<template>
  <div class="home">
    <topNav> <slot>蘑菇街</slot> </topNav>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.image" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 导航栏 -->
    <div class="nav">
      <div class="nav-l" v-for="item in recommend" :key="item.sort">
        <div>
          <img :src="item.image" />
        </div>
        <div>{{ item.title }}</div>
      </div>
    </div>
    <hr />
    <!-- 静态图片 -->
    <div class="img">
      <img src="@/assets/img/home/recommend_bg.jpg" alt="" />
    </div>
    <hr />

    <!-- tab 切换  数据变化 -->
    <div class="tab">
      <span
        @click="tabIds(item.id)"
        v-for="item in tabList"
        :key="item.id"
        :class="item.id == tabId ? 'active' : ''"
      >
        {{ item.name }}
      </span>
    </div>
    <!-- 商品卡片 子组件-->
    <div class="shop">
      <div v-if="tabId == 1" class="shopList">
        <shop
          v-for="item in liuxing"
          :key="item.iid"
          :item="item"
          @click.native="toduDetail(item.iid)"
        ></shop>
      </div>
      <div v-if="tabId == 2" class="shopList">
        <shop
          v-for="item in xinkuan"
          :key="item.iid"
          :item="item"
          @click.native="toduDetail(item.iid)"
        ></shop>
      </div>
      <div v-if="tabId == 3" class="shopList">
        <shop
          v-for="item in jingxuan"
          :key="item.iid"
          :item="item"
          @click.native="toduDetail(item.iid)"
        ></shop>
      </div>
    </div>
    <!-- 底部 -->
    <buttonNav></buttonNav>
  </div>
</template>

<script>
import {
  querybanner,
  queryShop1,
  queryShop2,
  queryShop3,
} from "@/plugins/api/index";
import ButtonNav from "@/components/buttonNav.vue";
import topNav from "@/components/topNav.vue";
import Shop from "../components/shop.vue";
export default {
  components: { topNav, ButtonNav, Shop },
  name: "Home",
  data() {
    return {
      bannerList: "", //轮播图
      recommend: "", //导航栏图片
      tabId: 1,
      tabList: [
        { id: 1, name: "流行" },
        { id: 2, name: "新款" },
        { id: 3, name: "精选" },
      ],
      liuxing: "",
      xinkuan: "",
      jingxuan: "",
    };
  },
  mounted() {
    this.requestBanner();
    this.requestShop();
  },
  methods: {
    requestBanner() {
      querybanner().then((res) => {
        this.bannerList = res.data.data.banner.list;
        this.recommend = res.data.data.recommend.list;
      });
    },

    requestShop() {
      //   流行
      queryShop1().then((res) => {
        this.liuxing = res.data.data.list;
        // console.log(this.liuxing);
      });
      //新款
      queryShop2().then((res) => {
        this.xinkuan = res.data.data.list;
      });
      //精选
      queryShop3().then((res) => {
        this.jingxuan = res.data.data.list;
      });
    },

    //tab 切换
    tabIds(id) {
      this.tabId = id;
    },
    toduDetail(id) {
      this.$router.push({ path: "/detail", query: { id } });
     
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  margin-top: 50px;
  margin-bottom: 100px;
  .swipe {
    height: 200px;
    // background-color: red;

    .my-swipe .van-swipe-item {
      height: 200px;
      // color: #fff;
      text-align: center;
      // background-color: #39a9ed;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .nav {
    width: 100vw;
    height: 100px;
    display: flex;
    .nav-l {
      width: 25%;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
  hr {
    height: 10px;
    background-color: #cccccc;
  }
  .img {
    width: 100vw;
    height: 300px;
    img {
      height: 100%;
    }
  }
  //tab
  .tab {
    display: flex;
    border: 1px solid #ccc;
    justify-content: space-around;
    align-items: center;
    span {
      height: 40px;
      line-height: 40px;
      text-align: center;
      flex: 1;
    }
    .active {
      background-color: rgb(185, 184, 184);
      color: blue;
    }
  }
  //商品卡片
  .shop {
    .shopList {
      margin: 5px 0;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  }
}
</style>